<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <div @click="test='修改基本数据'">
            <!--  当data为基本数据时,直接修改就可以驱动页面更新 -->
            {{test}}
        </div>
        <div>
            <h1>对象数据类型</h1>
            {{obj}}
            <!-- 
                在vue中的对象渲染时,会遍历对每个数据进行添加监听get与set
                 但是当使用添加或者删除时get与set无法监听的到,所以如果使用添加或者删除就
                 不会触发页面更新,这时可以使用内置的$froceUpdata()强制刷新页面
             -->
            <button @click="objFun('add')"> 增加 </button>
            <!-- 除此以外,vue还内置了一些函数用于修改数据,这些函数内置了对页面的强制更新 -->
            <button @click="objFun('set')"> 修改 </button>
            <button @click="objFun('remove')"> 删除 </button>
        </div>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    test: '基本数据',
                    obj: {
                        name: "张三",
                        age: 45
                    }

                };
            },
            methods: {
                objFun(str) {
                    switch (str) {
                        case "add":
                            // this.obj.sex = '男'
                            this.$set(this.obj, 'sex', '男') // 内置set方法
                            // Vue.set(this.obj, 'sex', '男') 
                            // 或者直接使用Vue静态方法直接添加
                            return

                        case "remove":
                            // delete this.obj.name
                            // 强制数据更新
                            // this.$forceUpdate()
                            // 内置的删除方法 (参数为指定对象,指定的属性值)
                            this.$delete(this.obj, 'name')
                            return

                        case "set":
                            this.obj.name = '李四'
                            return
                        default:
                            return 0
                    }
                }
            },
        });
    </script>
</body>

</html>